<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<script src="/js/layui.js"></script>
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/layui.css" rel="stylesheet">
<link href="/css/style.css?v=4.1.0" rel="stylesheet">
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<input type="hidden"  id="srcPictrue" th:value="${car.src}">
						<h2>车辆信息
						</h2>
						<img  id="demo1" style="width: 300px;">
						<h3>
							[[${car.carName}]]
						</h3>
						<p>[[${car.rentPrice}]]元/天</p>
						<p>[[${car.carSite}]]座</p>
						<!--<p>[[${car.carNo}]]</p>-->
						<form class="form-horizontal m-t" id="signupForm">
							<input id="userId" name="userId" th:value="${userid}" type="hidden">
							<input id="carId" name="carId" th:value="${car.id}"  type="hidden">
							<input id="perprice" name="perprice" th:value="${car.rentPrice}" type="hidden">
							<div class="form-group">
								<label class="col-sm-3 control-label">租车日期：</label>
								<div class="col-sm-8">
									<input id="beginDate" name="beginDate" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">还车日期：</label>
								<div class="col-sm-8">
									<input id="endDate" name="endDate" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">金额合计：</label>
								<div class="col-sm-8">
									<input id="totalPrice" name="totalPrice"  class="form-control" type="text" readonly="readonly">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
	</div>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript">
		$(function () {
			$('#demo1').attr('src', $('#srcPictrue').val());
		});
		$().ready(function() {
			validateRule();
		});

		$.validator.setDefaults({
			submitHandler : function() {
				save();
			}
		});
		function save() {
			var data=$('#signupForm').serialize();
			layui.use('layer', function() {
				var layer = layui.layer;
				parent.layer.confirm('支付窗口', {
					btn: ['已支付', '未支付']
				}, function (index, layero) {
					layer.close(index);
					let loading = layer.load();
					$.ajax({
						cache: true,
						type: "POST",
						url: "/web/save",
						data: data,// 你的formid
						async: false,
						error: function (request) {
							parent.layer.alert("Connection error");
						},
						success: function (data) {
							if (data.code == 0) {
								var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
								parent.layer.close(index);
								parent.layer.msg("预定成功");
								var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
								parent.layer.close(index);


							} else {
								parent.layer.alert(data.msg)
							}

						}
					});
				}, function (index) {
					layer.close(index);
				});
			});


		}
		function validateRule() {
			var icon = "<i class='fa fa-times-circle'></i> ";
			$("#signupForm").validate({
				rules : {
					beginDate : {
						required : true
					},
					endDate : {
						required : true
					}
				},
				messages : {
					beginDate : {
						required : icon + "请选择租车日期"
					},
					endDate : {
						required : icon + "请选择还车日期"
					}
				}
			})
		}

		layui.use([ 'laydate'], function(){
			var $ = layui.$;
			var laydate = layui.laydate;
			var nowTime = new Date().valueOf();
			var max = null;

			var start = laydate.render({
				elem: '#beginDate',
				type: 'date',
				btns: ['clear', 'confirm'],
				done: function(value, date){
					endMax = end.config.max;
					end.config.min = date;
					end.config.min.month = date.month -1;

					var countdate1=$("#beginDate").val();
					var countdate2=$("#endDate").val();
					let and = DateDiff(countdate1,countdate2);

					var perprice=$("#perprice").val();
					var countprice=parseInt(perprice)*parseInt(and);
					if(!isNaN(countprice)){
						$("#totalPrice").val(countprice);
					}else {
						$("#totalPrice").val(null);
					}
				}
			});
			var end = laydate.render({
				elem: '#endDate',
				type: 'date',
				done: function(value, date){
					if($.trim(value) == ''){
						var curDate = new Date();
						date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
					}
					start.config.max = date;
					start.config.max.month = date.month -1;

					var countdate1=$("#beginDate").val();
					var countdate2=$("#endDate").val();
					let and = DateDiff(countdate1,countdate2);

					var perprice=$("#perprice").val();
					var countprice=parseInt(perprice)*parseInt(and);
					if(!isNaN(countprice)){
						$("#totalPrice").val(countprice);
					}else {
						$("#totalPrice").val(null);
					}

				}
			});
		});
		function DateDiff(sDate1, sDate2) {
			var aDate, oDate1, oDate2, iDays;
			aDate = sDate1.split("-");
			oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);  //转换为yyyy-MM-dd格式
			aDate = sDate2.split("-");
			oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0]);
			iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数

			return iDays+1;  //返回相差天数
		}
	</script>
</body>
</html>
